<div class="layui-card">

	<div class="layui-card-header">
		<h2 class="header-title"><i class="layui-icon layui-icon-template-1"></i> 登陆背景图管理</h2>
		<span class="layui-breadcrumb pull-right"> <a href="#!console">首页</a>
			<a><cite>登陆背景图管理</cite></a>
		</span>
	</div>
	
	<div class="layui-card-body">
		<div class="layui-card">
			<div class="layui-card-body">
				<input type="hidden" id="csrftoken" value="${csrftoken!}"/>
	            <div class="test-table-reload-btn" style="margin-bottom: 10px;">
             		 关键词搜索：
	            	<div class="layui-inline">
	                	<input type="text" id="keyword" placeholder="请输入关键词检索" autocomplete="off" class="layui-input">
	              	</div>
	              	<button class="layui-btn" id="loginPic-btn-search">搜索</button>
            	</div>
				<table class="layui-table" id="loginPic-table" lay-filter="loginPic-table"></table>
			</div>
			
		</div>
	</div>


	<!-- 表格工具栏 -->
	<script type="text/html" id="loginPic-table-toolbar">
    	<a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
    	<a　id="loginPic-table-toolbar-del" style="display:none" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
	</script>
	<!-- 表格状态列 -->
	<script type="text/html" id="loginPic-tpl-used">
    	<input type="checkbox" lay-filter="loginPic-tpl-used" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" {{d.used==1?'checked':''}}/>
	</script>

	<script>
		layui.use([ 'form', 'table', 'util', 'config', 'admin' ], function() {
			var form = layui.form;
			var table = layui.table;
			var config = layui.config;
			var layer = layui.layer;
			var util = layui.util;
			var admin = layui.admin;
			
			form.render(null, 'component-form-group');
			
			// 渲染表格
			table.render({
				elem : '#loginPic-table',
				url : '${rc.contextPath}/loginPic/data',
				method : 'POST',
				loading : true,
				page : false,
				toolbar : '#loginPic-table-toolbar',
				defaultToolbar: ['filter'],
				cols : [ [ 
		           	{ type : 'numbers'},
		           	{ type : 'checkbox'},
		            { title : 'ID', field: 'id', width: 260},
		           	{ title : '标题', field : 'title', edit: 'text', width: 120},
		           	{ title : '登陆背景图', field : 'url', edit: 'text', width: 180},
					{ title : '启用状态', field : 'used', templet : '#loginPic-tpl-used', width: 100},
		          	{ title : '创建时间', templet : function(d) {return util.toDateString(d.createTime);}, width: 200},
			       	{ title : '修改时间', templet : function(d) { return util.toDateString(d.updateTime); }, width: 200}
				] ]
			});
			
			// 搜索按钮点击事件
			$('#loginPic-btn-search').click(function() {
				table.reload('loginPic-table', {
					where : {
						keyword : $('#keyword').val()
					}
				});
			});
			
		  	//监听头工具栏事件
			table.on('toolbar(loginPic-table)', function(obj){
			    if('add' == obj.event) {
			    	showAddModel();
			    	return;
			    } else if ('del' == obj.event) {
				    var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data;
					if(data.length > 0) {
						var ids = [];
						data.forEach(function(d) {
							ids.push(d.id);
						})
						layer.confirm('确定要删除选择的登陆背景图记录吗？', function(i) {
							layer.close(i);
							layer.load(2);
							admin.req('${rc.contextPath}/loginPic/delete', {
								ids: ids,
								csrftoken: $("#csrftoken").val()
							}, function(data) {
								layer.closeAll('loading');
								if (data.code == 200) {
									layer.msg(data.message, {
										icon : 1
									});
									table.reload('loginPic-table', {});
								} else {
									layer.msg(data.message, {
										icon : 2
									});
								}
							}, 'POST');
						});
					} else {
						layer.msg('请至少选择一条记录', {
							icon : 2
						});
					}
			    	return;
			    }
			    
			});

			// 工具条点击事件
			table.on('tool(loginPic-table)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
			});
			
			//监听单元格编辑
		  	table.on('edit(loginPic-table)', function(obj){
			    var value = obj.value ,data = obj.data ,field = obj.field;
			    layer.load(2);
				admin.req('${rc.contextPath}/loginPic/updateField', {
					csrftoken: $("#csrftoken").val(),
					id : data.id,
					field: field,
					value : value
				}, function(data) {
					layer.closeAll('loading');
					layer.msg(data.message, {
						icon : data.code == 200 ? 1 : 2
					});

					if(data.code == 200) {
						table.reload('loginPic-table', {});
					}
				}, 'POST');
		  	});

			//显示表单弹窗
			var showAddModel = function() {
				admin.popupCenter({
					title : '新增登陆背景图',
					path : '${rc.contextPath}/loginPic/add',
					finish : function() {
						table.reload('loginPic-table', {});
					}
				});
			};
			
			// 复选框选择监听
			table.on('checkbox(loginPic-table)', function(obj) {
			    var checkStatus = table.checkStatus('loginPic-table'),
		    	data = checkStatus.data;
				if(data.length > 0) {
					$("#loginPic-table-toolbar-del").show();
				} else {
					$("#loginPic-table-toolbar-del").hide();
				}
			});
			
			//监听行单击事件
		  	table.on('row(loginPic-table)', function(obj){
		    	//标注选中样式
		    	obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
		  	});
			
		 // 修改menu状态
			form.on('switch(loginPic-tpl-used)', function(obj) {
				layer.load(2);
				admin.req('${rc.contextPath}/loginPic/changeusedstatus', {
					id : obj.elem.value,
					used : obj.elem.checked ? 1 : 0
				}, function(data) {
					layer.closeAll('loading');
					if (data.code == 200) {
						layer.msg(data.message, {
							icon : 1
						});
						table.reload('loginPic-table', {});
					} else {
						layer.msg(data.message, {
							icon : 2
						});
						$(obj.elem).prop('checked', !obj.elem.checked);
						form.render('checkbox');
					}
				}, 'POST');
			});

		});
	</script>